<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Task Tracker</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="icon" type="image/png" href="icon/icon32.png">
  <link rel="icon" sizes="16x16" href="icon/icon16.png">
  <link rel="icon" sizes="32x32" href="icon/icon32.png">
  <link rel="icon" sizes="48x48" href="icon/icon48.png">
  <link rel="icon" sizes="128x128" href="icon/icon128.png">
  <link rel="stylesheet" href="timer-float.css">
  <style>
    /* 调整任务详情抽屉中标题的字体大小 */
    .drawer-section-title {
      font-size: 12px;
      color: #5f6368;
      font-weight: 500;
      margin-bottom: 4px;
    }
    
    /* 调整筛选标签按钮的大小 */
    .filter-tab {
      font-size: 12px;
      padding: 4px 10px;
      height: 26px;
      min-width: 70px;
    }
    
    /* 修复Add Task弹出框样式 */
    .close-button {
      background: none;
      border: none;
      font-size: 24px;
      cursor: pointer;
      color: #757575;
      line-height: 1;
      padding: 0;
      margin: 0;
    }
    
    /* 当modal-overlay显示为flex时，确保内部modal也显示为flex */
    #task-modal.modal-overlay[style*="display: flex"] .modal {
      display: flex !important;
    }
    
    /* 直接减小任务详情抽屉所有section的间距 */
    #task-drawer .drawer-section {
      margin-bottom: 8px !important;
      padding-bottom: 0 !important;
    }
    
    /* 直接减小section标题与内容的间距 */
    #task-drawer .section-header {
      margin-bottom: 0 !important;
    }
    
    /* 减小section内容元素的上边距 */
    #task-drawer .drawer-detail {
      margin-top: 0 !important;
      margin-bottom: 0 !important;
    }
    
    /* 调整标签容器间距 */
    #drawer-task-tags.tags-container {
      margin-top: 0 !important;
      line-height: 1.3 !important;
    }
    
    /* 调整时间显示间距 */
    #task-drawer .time-with-timer {
      margin-top: 0 !important;
      margin-bottom: 0 !important;
    }
    
    /* 调整状态显示间距 */
    #task-drawer .status-with-badge {
      margin-top: 0 !important;
      margin-bottom: 0 !important;
    }
    
    /* 调整drawer-content内边距 */
    #task-drawer .drawer-content {
      padding-top: 8px !important;
    }
    
    /* 只为notes部分保留正常间距 */
    #task-drawer .drawer-section:last-child {
      margin-top: 16px !important;
    }
    
    /* 调整操作按钮组间距 */
    #task-drawer .drawer-actions-bar {
      margin-bottom: 12px !important;
    }
  </style>
</head>
<body>
  <!-- Notification Element -->
  <div id="notification" class="notification success">
    <p id="notification-message" class="notification-message"></p>
  </div>
  <div id="today-tasks-modal" class="modal" style="display:none;">
    <div class="modal-content" style="max-width:520px;">
      <div class="modal-header">
        <h3 class="modal-title">Today's Tasks</h3>
        <button id="close-today-tasks-modal" class="modal-close">&times;</button>
      </div>
      <div class="modal-body">
        <table id="today-tasks-table" style="width:100%;border-collapse:collapse;">
          <thead>
            <tr>
              <th style="text-align:left;">Task</th>
              <th style="text-align:left;">Date</th>
              <th style="text-align:left;">Hours</th>
              <th style="text-align:left;">Tags</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
      <div class="modal-footer">
        <button id="close-today-tasks-btn" class="modal-button secondary-button">Close</button>
      </div>
    </div>
  </div>
  
  <div class="container">
    <header>
      <div class="logo">
        <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M24 4H6V17.3333V30.6667H24V44H42V30.6667V17.3333H24V4Z" fill="currentColor"></path>
        </svg>
        <h2>Task Tracker</h2>
      </div>
      <div id="main-nav"></div>
    </header>
    
    <div class="content">
      <div class="content-container">
        <div class="title-section">
          <div class="title-content">
            <p class="main-title">Daily Task Record</p>
            <p class="subtitle">Track your daily work activities and time spent.</p>
          </div>
        </div>
        
        <div class="control-row">
          <div class="date-range-filter">
            <label class="form-field">
              <p class="form-label">From</p>
              <div class="date-input-wrapper">
                <input id="date-from" type="date" class="form-input" value="">
                <span class="date-placeholder">YYYY-MM-DD</span>
              </div>
            </label>
            <label class="form-field">
              <p class="form-label">To</p>
              <div class="date-input-wrapper">
                <input id="date-to" type="date" class="form-input" value="">
                <span class="date-placeholder">YYYY-MM-DD</span>
              </div>
            </label>
            <button id="apply-date-filter" class="filter-button">
              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline>
                <polyline points="16 7 22 7 22 13"></polyline>
              </svg>
              <span>Apply</span>
            </button>
          </div>
          
          <div class="action-buttons">
            <button id="open-task-modal" class="button">
              <span>Add Task</span>
            </button>
            <button id="show-today-tasks-btn" class="button">
              <span>Show Today's Tasks</span>
            </button>
          </div>
        </div>
        
        <h2 class="section-title" style="display:flex;align-items:center;justify-content:space-between;">
          <span>Today's Tasks</span>
          <button id="open-whiteboard-btn" class="button primary-button" style="margin-left:16px;">Whiteboard</button>
        </h2>
        
        <div class="task-filter-tabs">
          <button class="filter-tab active" data-filter="to-process">To Process</button>
          <button class="filter-tab" data-filter="all">All</button>
          <button class="filter-tab" data-filter="pending">Pending</button>
          <button class="filter-tab" data-filter="in-progress">In Progress</button>
          <button class="filter-tab" data-filter="completed">Completed</button>
        </div>
        
        <div class="table-container">
          <div class="table-wrapper">
            <table>
              <thead>
                <tr>
                  <th style="width: 65%;">Task</th>
                  <th style="width: 15%;">Time Spent</th>
                  <th style="width: 15%;">Status</th>
                  <th style="width: 5%;"></th>
                </tr>
              </thead>
              <tbody id="tasks-tbody">
                
              </tbody>
            </table>
          </div>
        </div>
        
        <h2 class="section-title">Summary</h2>
        
        <div class="stats-container">
          <div class="stat-card">
            <p class="stat-label">Total Tasks</p>
            <p id="total-tasks" class="stat-value"></p>
          </div>
          <div class="stat-card">
            <p class="stat-label">Total Hours</p>
            <p id="total-time" class="stat-value"></p>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Right Drawer -->
  <div id="drawer-overlay" class="drawer-overlay"></div>
  <div id="task-drawer" class="drawer">
    <div class="drawer-header">
      <h3 class="drawer-title">Task Details</h3>
      <button id="close-drawer" class="drawer-close">&times;</button>
    </div>
    <div class="drawer-content">
      <div class="drawer-actions-bar">
        <div class="action-group">
          <button id="prev-status-btn" class="action-button">
            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <polyline points="15 18 9 12 15 6"></polyline>
            </svg>
            <span>Prev</span>
          </button>
          <button id="next-status-btn" class="action-button">
            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <polyline points="9 18 15 12 9 6"></polyline>
            </svg>
            <span>Next</span>
          </button>
          <button id="toggle-timer-btn" class="action-button">
            <svg id="timer-icon-play" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <polygon points="5 3 19 12 5 21 5 3"></polygon>
            </svg>
            <svg id="timer-icon-pause" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: none;">
              <rect x="6" y="4" width="4" height="16"></rect>
              <rect x="14" y="4" width="4" height="16"></rect>
            </svg>
            <span>Timer</span>
          </button>
        </div>
        <div class="action-group action-group-right">
          <button id="delete-task-btn" class="action-button danger-action icon-only">
            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <polyline points="3 6 5 6 21 6"></polyline>
              <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
            </svg>
          </button>
        </div>
      </div>
      <div class="drawer-section">
        <div class="section-header">
          <p class="drawer-section-title">Task Name</p>
          <button id="edit-title-btn" class="icon-button">
            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path>
            </svg>
          </button>
        </div>
        <div class="title-container">
          <p id="drawer-task-title" class="drawer-detail">-</p>
          <div class="textarea-container">
            <input id="drawer-task-title-edit" class="drawer-detail form-input" style="display: none;">
          </div>
        </div>
        <div id="title-actions" class="drawer-actions" style="display: none;">
          <button id="cancel-title" class="modal-button secondary-button small-button">Cancel</button>
          <button id="save-task-title" class="modal-button primary-button small-button">Save</button>
        </div>
      </div>
      <div class="drawer-section">
        <div class="section-header">
          <p class="drawer-section-title">Time Spent</p>
        </div>
        <div class="time-with-timer">
          <div class="timer-display">
            <span id="task-timer" class="drawer-detail">00:00:00</span>
          </div>
        </div>
      </div>
      <div class="drawer-section">
        <div class="section-header">
          <p class="drawer-section-title">Status</p>
        </div>
        <div class="status-with-badge">
          <span id="drawer-task-status" class="drawer-detail"></span>
        </div>
      </div>
      <div class="drawer-section">
        <div class="section-header">
          <p class="drawer-section-title">Created Date</p>
        </div>
        <p id="drawer-task-created-date" class="drawer-detail">-</p>
      </div>
      <div id="completed-date-section" class="drawer-section" style="display: none;">
        <div class="section-header">
          <p class="drawer-section-title">Completed Date</p>
        </div>
        <p id="drawer-task-completed-date" class="drawer-detail">-</p>
      </div>
      <div class="drawer-section">
        <div class="section-header">
          <p class="drawer-section-title">Tags</p>
        </div>
        <div id="drawer-task-tags" class="drawer-detail tags-container"></div>
        <button id="edit-tags-btn" class="icon-button" title="Edit tags" style="margin-left:6px;">
          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path>
          </svg>
        </button>
        <div id="edit-tags-container" style="display:none;margin-top:4px;">
          <input id="edit-tags-input" class="drawer-detail form-input" placeholder="Separate tags with commas">
          <div id="tags-actions" class="drawer-actions" style="display:flex;gap:8px;margin-top:4px;">
            <button id="cancel-tags-btn" class="modal-button secondary-button small-button">Cancel</button>
            <button id="save-tags-btn" class="modal-button primary-button small-button">Save</button>
          </div>
        </div>
      </div>
      <div class="drawer-section">
        <div class="section-header">
          <p class="drawer-section-title">Notes</p>
          <button id="edit-notes-btn" class="icon-button">
            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path>
            </svg>
          </button>
        </div>
        <div class="notes-container">
          <p id="notes-display" class="drawer-detail">This is the detailed note for the task.</p>
          <div class="textarea-container">
            <textarea id="drawer-task-notes" class="drawer-detail drawer-textarea" rows="4" style="display: none;"></textarea>
            <button id="fullscreen-notes-btn" class="icon-button" title="Full" style="position:absolute;right:12px;top:8px;z-index:2;display:none;margin-right: 6px;">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 8V4h4"/><path d="M20 8V4h-4"/><path d="M4 16v4h4"/><path d="M20 16v4h-4"/><path d="M5 19l5-5"/><path d="M19 5l-5 5"/></svg>
            </button>
          </div>
        </div>
        <div id="notes-actions" class="drawer-actions" style="display: none;">
          <button id="cancel-notes" class="modal-button secondary-button small-button">Cancel</button>
          <button id="save-task-notes" class="modal-button primary-button small-button">Save</button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Add Task Modal -->
  <div id="task-modal" class="modal">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title">Add New Task</h3>
        <button id="close-modal" class="modal-close">&times;</button>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label class="form-field">
            <p class="form-label">Task Description</p>
            <input id="task-description" class="form-input" placeholder="Describe your task">
          </label>
        </div>
        <div class="form-group">
          <label class="form-field">
            <p class="form-label">Tags</p>
            <input id="task-tags" class="form-input" placeholder="Separate multiple tags with commas, e.g.: Urgent,Important,Work">
          </label>
        </div>
        <div class="form-group" style="display: none;">
          <label class="form-field">
            <p class="form-label">Time Spent (hours)</p>
            <input id="time-spent" class="form-input" placeholder="e.g., 2.5" value="0">
          </label>
        </div>
        <div class="form-group" style="display: none;">
          <label class="form-field">
            <p class="form-label">Status</p>
            <select id="task-status" class="form-input">
              <option value="New">New</option>
              <option value="In Progress">In Progress</option>
              <option value="Pending" selected>Pending</option>
              <option value="Completed">Completed</option>
            </select>
          </label>
        </div>
      </div>
      <div class="modal-footer">
        <button id="add-task-button" class="button primary-button">Add Task</button>
        <button id="cancel-task" class="action-button modal-cancel">Cancel</button>
      </div>
    </div>
  </div>

  <!-- Delete Confirmation Dialog -->
  <div id="confirm-dialog" class="modal-overlay">
    <div class="confirm-modal">
      <div class="confirm-header">
        <h3 class="confirm-title">Delete Task</h3>
      </div>
      <div class="confirm-body">
        <p id="confirm-message">Are you sure you want to delete this task?</p>
      </div>
      <div class="confirm-footer">
        <button id="cancel-delete" class="modal-button secondary-button">Cancel</button>
        <button id="confirm-delete" class="modal-button primary-button danger-button">Delete</button>
      </div>
    </div>
  </div>

  <!-- JS File Reference -->
  <script src="home.js"></script>
  <script src="timer-float.js"></script>
  <script src="nav.js"></script>

  <!-- 在body结束前添加全屏编辑overlay -->
  <div id="notes-fullscreen-overlay" style="display:none;position:fixed;z-index:9999;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.5);">
    <div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80vw;height:80vh;background:#fff;border-radius:8px;display:flex;flex-direction:column;box-shadow:0 4px 24px rgba(0,0,0,0.18);">
      <textarea id="notes-fullscreen-textarea" style="flex:1;font-size:16px;padding:16px;resize:none;border:none;outline:none;font-family:inherit;"></textarea>
      <div style="padding:12px;text-align:right;">
        <button id="exit-fullscreen-notes-btn" class="modal-button secondary-button">Exit Fullscreen</button>
      </div>
    </div>
  </div>
</body>
</html> 